<template>
  <div style="height: calc(100vh - 108px);">
    <div class="core-container" id="plat">
      <div class="plat-base plat-top">
        <span class="title">我的工作台</span>
      </div>
      <div v-for="item in productInfo.productList">
        <plat-header :productInfo="item"></plat-header>
        <div class="plat-base plat-middle">
          <div class="pm-item pm-item_first">
            <div class="pi-base">
              当前可贷金额
            </div>
            <div class="pi-base pi-base_item">
              <span class="pb-left">¥</span>
              <span class="pb-right">{{ vMoney.decode(item.useAmount,2) }}</span><br/>

              <span v-if="item.productCode==nbProductCode" style="position: relative;font-size: 12px;top: -8px;color: #a5a3a3;">
                  <i class="el-icon-warning"></i>实际金额以银行为主
              </span>
            </div>
          </div>
          <div class="pm-item pm-item_second">
            <div class="pi-base">
              当前在贷金额
            </div>
            <div class="pi-base pi-base_item" v-if="item.balance">
              <span class="pb-left">¥</span>
              <span class="pb-right">{{ vMoney.decode(item.balance,2) }}</span>
            </div>
            <div class="pi-base pi-base_item" v-else>
              --
            </div>
          </div>
          <div class="pm-item">
            <div class="pi-base_tag">
              <span v-if="item.status=='4'" class="tag-error">已过期</span>
              <span class="tag-success" v-else>已签约</span>
            </div>
            <div class="pi-base pi-base_btn pi-base_btn55" v-if="item.status=='4' && item.productCode == zsProductCode">
              <el-button type="warning" class="base-btn apply-btn" @click.native.prevent="applyAgain(item.fundCode,item.productCode)">
                重新申请
              </el-button>
            </div>
            <div class="pi-base pi-base_btn" v-else>
              <el-button v-if="item.productCode==zsProductCode" type="warning" class="base-btn apply-btn"
                         @click.native.prevent="zsApplySubmit">
                立即支用
              </el-button>
              <el-button v-else-if="item.productCode == nbProductCode" type="warning" class="base-btn apply-btn"
                         @click.native.prevent="nbApplySubmit"
              >
                我要提款
              </el-button>

              <div class="pi-base">
                <el-button @click="goLoanHistory(item)" type="warning" class="base-btn apply-btn loan-btn btn-m-top">
                  支用列表
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <msg :showMsg="showMsg" @hide="hideMsg">
      <div class="plat-alert">
        <div class="loan-item">
          <p class="pa-top">
            <img src="../../../assets/zsBank/zs_loan.png" />
          </p>
        </div>
      </div>
    </msg>

    <el-dialog title="请扫码前往宁波银行APP操作" :visible.sync="showNbwmImg">
      <div style="text-align: center;margin: 20px auto 40px auto">
        <img src="../../../assets/bussiness/nbee.png" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import {queryProductItemsNoLogin} from '@/api/product/product';
import {queryProducting,queryLocking} from '@/api/plat/plat';
import platRepay from "./zsbank/platRepay";
import platLoan from "./zsbank/platLoan";
import platHeader from "./platHeader";
import Msg from '../../../components/common/alert/msg';
import { Loading } from 'element-ui';
export default {
  name: "platContent",
  data() {
    return {
      listArray: [],
      showMsg: false,
      productInfo: {
        amountSum: '',
        balanceSum: '',
        productList: [],
        quotaSum: ''
      },
      nbProductCode:process.env.NB_CODE,
      zsProductCode:process.env.ZS_CODE,
      showNbwmImg: false
    };
  },

  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  components: {
    platRepay, platLoan,platHeader,Msg
  },
  mounted() {
    this.queryListArray();
    if (this.$route.query.action == '7') {
      this.showNbwmImg = true;
    }
    let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';
    uscCode && this.getProductByCode(uscCode);
  },
  methods: {
    queryListArray() {
      queryProductItemsNoLogin().then(res => {
        if (res.code === 200) {
          this.listArray =  res.data
        }
      });
    },
    getProductByCode(uscCode) {
      let _this = this;
      let loading = Loading.service({
        text: '数据加载中……',
        fullscreen: false,
        background: 'rgba(255, 255, 255, .99)',
        target: document.getElementById('plat')
      });
      queryProducting(uscCode).then(response => {
        if (response.code === 200) {
          _this.productInfo = response.data;
        }
        loading.close();
      }).catch(e=>{
        loading.close();
      });
    },
    /***
     * 授信过期
     * 发起重新申请
     */
    applyAgain(fundCode,productCode){
      let item = {};
      for (let i=0; i< this.listArray.length; i++) {
        if (this.listArray[i].productCode == productCode) {
          item = this.listArray[i];
          break;
        }
      }
      this.$router.push({
        name: 'productDetail',
        query: item
      });
    },
    queryIsLocking(uscCode){
      let _this = this;
      queryLocking(uscCode).then(response => {
        if (response.code === 200) {
          if (response.data) {
            _this.showMsg = true;
          } else {
            _this.$message({
              message: '退税锁定账户与贷款账户不一致，无法发起支用！',
              type: 'warning'
            });
          }
        }
      });
    },
    /***
     * 立即支用
     * status（1 启用，0 停用）
     *
     * 发起
     * author：fsg
     */
    zsApplySubmit() {
      let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';
      let status = this.user.user.status?this.user.user.status:'';
      if(status=='1'){
        uscCode && this.queryIsLocking(uscCode);
      }else{
        this.$message({
          message: '当前账户已被禁用，请联系我们！'+process.env.LLT_KF_PHONE,
          type: 'warning'
        });
      }
    },
    nbApplySubmit(){
      this.showNbwmImg = true;
    },
    hideMsg(){
      this.showMsg = false;
    },
    goLoanHistory(e) {
      this.$emit('drawlist',e);
    }
  }
}
</script>
<style lang="scss">
.core-container {
  min-height: calc(100vh - 108px);
  width: 1048px;
  float: left;
  background: white;

  .el-button.is-disabled {
    background-color: #D9D9D9;
    color: #fff;
    border-color: #D9D9D9;
  }



  .plat-base {
    font-size: 14px;
    width: 100%;
    text-align: left;
    margin-top: 20px;
    padding-left: 18px;

    .confirm-btn {
      float: inherit;
      text-align: center;
      width: 200px;
      background-color: #FFA01D;
    }

  }

  .plat-top {
    margin-top: 12px;
    height: 36px;
    border-bottom: 2px solid #FEC171;

    span.title {
      font-size: 18px;
      color: #6C6C6C;
      text-align: left;
      width: 50%;
      float: left;
      display: block;
    }

    .base-btn {
      width: 120px;
      float: right;
      margin-right: 20px;
      border-style: none;
    }
  }

  .plat-history {
    text-align: right;
    padding-right: 70px;
    color: #FFA01D;
    font-weight: bold
  }

  .plat-middle {
    height: 150px;
    width: 92%;
    margin: 0 auto;
    border-radius: 15px;
    background-image: url("../../../assets/bussiness/left_top_bar.png");
    background-position-x: -3px;
    background-position-y: 36px;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 10px -3px #000000;

    .pm-item {
      width: 33%;
      float: left;
      height: 100%;

      .btn-m-top {
        margin-top: 6px;
      }

      .pi-base {
        width: 100%;
        float: left;
        height: 50%;
        line-height: 35px;

        .margin-hzbank {
          margin-top: 26px;
        }

        .pl-left {
          font-size: 12px;
          padding-left: 16px;
        }

        .pl-middle {
          font-weight: bold;
          font-size: 20px;
          color: #EC3F33;
          padding: 0 0 0 4px;
        }

        .pl-right {
          color: #FE5338;
          font-size: 28px;
          font-weight: bold;
        }

        .apply-btn {
          width: 180px;
          height: 40px;
          /*margin-left: 70px;*/
        }

        .pb-btn {
          margin-left: 70px;
          margin-top: 26px;
        }

        .loan-btn {
          background-color: white;
          color: #FFA01D;
          border-color: #FFA01D;
        }

      }

      .pi-base:first-child {
        color: #6C6C6C;
        padding-top: 30px;
        font-size: 14px;
        line-height: 14px;
        position: relative;
      }

      .pi-base:last-child {
        color: #484848;

        .pb-left {
          font-size: 20px;
          font-weight: bold;
          padding-right: 6px;
        }

        .pb-right {
          font-size: 36px;
          font-weight: bold;
          position: relative;
          top: 2px;
        }

      }

      .pi-base_item {
        position: relative;
        bottom: 8px;
      }
      .pi-base_tag{
        width: 15%;
        margin-left: 10%;
        float: left;
        line-height: 150px;
        .tag-success{
          color: #4ab10a;
        }
        .tag-error{
          color: red;
        }
      }
      .pi-base_btn{
        width: 75%;
        text-align: center;
        height: 86px;
        margin-top: 32px;
      }
      .pi-base_btn55{
        margin-top: 55px;
      }
    }
    .pm-item_first{
      padding-left: 40px;
      word-break: break-all;
      word-wrap: break-word;
    }
    .pm-item_second{
      padding-left: 60px;
      word-break: break-all;
      word-wrap: break-word;
    }
  }

}
</style>
